<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap-4.5.0-dist/css/bootstrap.min.css">
    <!--3.引入jquery.min.js-->
    <script type="text/javascript" src="../jquery-3.5.0/jquery-3.5.0.min.js"></script>
    <!--4.引入bootstrap.min.js-->
    <script type="text/javascript" src="../bootstrap-4.5.0-dist/js/bootstrap.min.js"></script>
    <!--5.设定自定义样式-->
    <style>
        div.container{
            height:200px;
            background-color: orchid;
        }
        div.row{
            height: 200px;
        }
        div.row div{
            border:1px solid red;
            height:100px;
        }
        section{
            width:200px;
            height: 200px;
            /* background:linear-gradient(to left,red 30%,blue 60%,orange) ; */
            background:radial-gradient(circle,red,blue,orange)
        }
    </style>
</head>
<body>
    <section></section>
    <div class="container">
        <div class="spinner-border text-primary" role="status">
            <span class="sr-only">Loading...</span>
        </div>
        <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
              <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
              <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
              <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner">
              <div class="carousel-item active">
                <img src="../css06/images/图片.jpg" class="d-block w-100" alt="...">
              </div>
              <div class="carousel-item">
                <img src="../作业/0011.png" class="d-block w-100" alt="...">
              </div>
              <div class="carousel-item">
                <img src="../作业/0014.png" class="d-block w-100" alt="...">
              </div>
            </div>
            <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
              <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="sr-only">Next</span>
            </a>
          </div>
        <div class="alert alert-success" role="alert">
            A simple success alert—check it out!
        </div>
        <button type="button" class="btn btn-info">Info</button>
        <div class="row align-items-center">
            <div class="col-xl-1 col-3 bg-light align-self-start "></div>
            <div class="col-xl-5 col-4 bg-light align-self-center offset-xl-1"></div>
            <div class="col-xl-4 col-3 bg-light offset-xl-1 align-self-end"></div>
        </div>
        <table class="table table-striped">
            <thead>
              <tr>
                <th scope="col">#</th>
                <th scope="col">First</th>
                <th scope="col">Last</th>
                <th scope="col">Handle</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th scope="row">1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">
                        修改
                    </button>
                </td>
              </tr>
              <tr>
                <th scope="row">2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
              </tr>
              <tr>
                <th scope="row">3</th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
              </tr>
            </tbody>
          </table>
          <div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="staticBackdropLabel">修改学生信息</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body">
                  ...
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                  <button type="button" class="btn btn-primary">提交</button>
                </div>
              </div>
            </div>
          </div>
    </div>
</body>
</html>